<template>
  <div class="statusbar-window" v-if="window.id" :style="statusbarWindowStyle" @click="handleClick">
    <svg class="icon" aria-hidden="true">
      <use :xlink:href="`#${window.icon}`"></use>
    </svg>
    <div class="status-indicator" :style="indicatorStyle"></div>
  </div>
</template>

<script>
export default {
  name: "StatusBarWindow",
  props:{
    window:{
      type: Object,
      default: () => ({})
    }
  },
  computed:{
    focus() {
      if(this.window.minimize){
        return false
      }
      let list = this.$store.state.windowList
      let flag = true
      list.some(item => {
        if(item.zIndex>this.window.zIndex){
          flag = false
          return true
        }
      })
      return flag
    },
    indicatorStyle() {
      return {
        backgroundColor: this.window.alive? "#25dccd": "transparent"
      }
    },
    statusbarWindowStyle() {
      return {
        backgroundColor: this.focus ? "rgba(255,255,255,0.3)" : "transparent"
      }
    }
  },
  methods:{
    handleClick() {
      if(this.focus){
        this.$store.commit("setWindowMinimize", {id:this.window.id, flag: true})
      }else{
        if(this.window.minimize){
          this.$store.commit("setWindowMinimize", {id:this.window.id, flag: false})
        }
        this.$store.commit("setWindowZIndex", this.window.id)
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";
  .statusbar-window{
    height: 100%;
    padding: 0 $pnx;
    position: relative;
    margin: 0 $ms;
    &:hover{
      background-color: rgba(255,255,255,0.4)!important;
    }
    svg{
      height: 100%;
      font-size: $fz-lx;
    }
    .status-indicator{
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      height: 2px;
      background-color: white;
    }
  }
</style>
